<!--
 * @Description: 导航菜单组件
 * @Author: wang_k
 * @Date: 2025-04-25 11:22:48
 * @LastEditTime: 2025-04-25 11:25:59
 * @FilePath: /vue-project/src/components/AppMenu.vue
-->
<template>
  <el-menu
    :router="true"
    :default-active="activePath"
    mode="horizontal"
    class="navigation-menu"
  >
    <template v-for="route in menuRoutes" :key="route.path">
      <!-- 无子路由的菜单项 -->
      <el-menu-item 
        v-if="!route.children"
        :index="route.path"
        :route="route.path"
      >
        <el-icon v-if="route.meta?.icon">
          <component :is="route.meta.icon" />
        </el-icon>
        {{ route.meta?.title || route.name }}
      </el-menu-item>

      <!-- 有子路由的菜单项 -->
      <el-sub-menu 
        v-else
        :index="route.path"
      >
        <template #title>
          <el-icon v-if="route.meta?.icon">
            <component :is="route.meta.icon" />
          </el-icon>
          {{ route.meta?.title || route.name }}
        </template>
        <el-menu-item
          v-for="child in route.children"
          :key="child.path"
          :index="child.path"
          :route="child.path"
        >
          {{ child.meta?.title || child.name }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router"
import { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
import { computed } from 'vue'

const props = defineProps<{
  routes: RouteRecordRaw[]
}>()

const route = useRoute()

// 过滤有效菜单路由
const menuRoutes = computed(() => {
  return props.routes.filter(route => 
    !route.meta?.hidden && // 排除隐藏路由
    route.path !== '/' &&  // 排除首页（已单独处理）
    !route.path.includes(':') // 排除动态路由
  )
})

// 获取当前激活路径
const activePath = computed(() => {
  return route.matched
    .map(item => item.path)
    .find(path => path !== '/') || '/'
})
</script>

<style scoped>
.navigation-menu {
  flex: 1;
  border-bottom: none;
}

.el-menu-item,
.el-sub-menu__title {
  transition: all 0.3s;
}

.el-icon {
  margin-right: 5px;
}
</style>